@import "commonvars";

@mixin editor() {
  .scastie {
    .editor-mobile {
      display: none;
    }

    .editor-topbar {
      overflow-x: auto;
      width: 100%;
      height: $editor-topbar-height;
    }

    .editor-topbar{
      display: inline-block;

      &.disabled {
        display: none;
      }

      .workSheetIndicator {
        margin-right: 0px;
        text-align: center;
        width: 14px;
        margin-left: 8px;
        font-size: 14px;
        
        &.enabled.alpha {
          opacity: 0.3;
        }
      }
      .editor-buttons {
        white-space: nowrap;

        li {
          display: inline-block;
        }
        
        .btn {
          cursor: pointer;
          padding: 0 20px;
          line-height: 58px;
          
          i {
            margin-right: 5px;
          }

          &.disabled {
            text-decoration: none;
            cursor: not-allowed;
          }
        }
      }

      .save-buttons {
        display: inline-block;
        .btn {
          padding: 0 20px;
        }
      }
    }
    $console-handle-height: 33px;

    .content {
      height: 100%;
    }

    .console li {
      list-style: none;
      white-space: pre;
    }

    &.embedded {
      width: 800px;
      margin: 10px auto;
      padding: 10px 0;
      
      .main-panel {
        position: relative;
      }

      .console .switcher-show {
        position: absolute;
        width: 100%;
        position: absolute;
        bottom: -33px;
        z-index: 10;
      }

      .editor-container {
        .code {
          overflow: auto; 

          $min-height: 400px;

          .CodeMirror-scroll {
            min-height: $min-height;
            height: 100%;
          }

          &.console-open{
            .CodeMirror-scroll {
              min-height: $min-height - $console-height + $console-handle-height;
              height: 100%;
            }
          }
        }
      }
    }

    &:not(.embedded) {
      .main-panel {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: $sidebar-width;
        display: inline-block;
        width: calc(100% - #{$sidebar-width});
      }

      .main-panel.presentation-mode {
        width: 100%;
        height: 100%;
        left: 0;

        .CodeMirror {
          font-size: 32px;
        }

        .code {
          height: 100%;
          &.console-open{
            height: calc(100% - #{$console-height});
          }
        }
      }
    }

    &:not(.embedded) {
      .editor-container {
        .code {
          height: calc(100% - #{$header-height + $editor-topbar-height + $console-handle-height});

          &.console-open{
            height: calc(100% - #{$header-height + $editor-topbar-height + $header-height + $console-height - $console-handle-height + 5px});
          }
        }
      }
    }

    .editor-container {
      height: 100%;
      overflow: hidden;

      .editor-wrapper {
        height: 100%;
      }

      .fa {
          width: 30px;
          text-align: center;
      }

      .code {
        width: 100%;
        overflow: hidden;
      }

      .console-container {
        $handler-height: 6px;

        &.console-open {
          .output-console {
            height: $console-height - $console-handle-height - $handler-height;
          }
        }

        .switcher-show, .switcher-hide {
          text-align: right;
          line-height: $console-handle-height;
          padding-right: 20px;
          cursor: pointer;
        }

        .console {
          font-family: $code-font-family;
          height: 100%;
          .handler {
            height: $handler-height;
          }
        }

        .output-console {
          overflow: auto;
          padding: 20px;
        }
      }
    }

    &:not(.embedded) {
      @include phone {
        .main-panel {
          left: 0;
          width: 100%;
        }

        .content {
          height: 100%;
        }

        .force-desktop {
          .editor-container {
            .code {
              height: calc(100% - #{$force-desktop-height + $console-handle-height});
              &.console-open{
                height: calc(100% - #{$force-desktop-height + $console-height});
              }
            }
          }
        }

        .editor-container {
          .code {
            // height: calc(100% - #{$editor-mobile-height + $console-handle-height});
            &.console-open{
              height: calc(100% - #{$editor-mobile-height + $console-height});
            }
          }
        }

        .editor-topbar {
          display: none !important;
        }

        .content {
          margin-left: 0px !important;
        }

        .btn.run-button.mobile {
          display: block;
          position: absolute;
          bottom: 20px;
          left: 20px;
        }

        .switcher-show, .console {
          bottom: 48px !important;
          left: 0px !important;
        }

        .editor-mobile {
          display: block;
          position: fixed;
          bottom: 0px;
          left: 0px;
          height: $editor-mobile-height;
          width: 100%;
          
          & > * {
            padding: 0px 24px !important;
          }

          .btn {
            text-align: center;
            width: 50%;
            line-height: 48px !important;
            font-size: 20px;
            display: inline-block !important;
            float: left;
            padding: 0px !important;
            span {
                display: none;
            }
            i.fa {
                line-height: 40px;
                font-size: 20px;
            }
          }
        }
      }
    }

    &:not(.embedded) {
      @include tablet {
        .force-desktop {
          .main-panel {
            width: calc(100% - #{$force-desktop-width});  
          }      
        }

        .main-panel:not(.presentation-mode) {
          left: $sidebar-tablet-width;
          width: calc(100% - #{$sidebar-tablet-width});
        }

        .editor-topbar {
          font-size: 20px;
          li span {
            display: none;
          }
        }

        .editor-mobile {
          display: none;
        }
      }
    }
  }
}